<template>
  <div class="dataVisualize-box">
    <div class="card top-box">
      <div class="top-content">
        <el-row :gutter="40">
          <el-col class="mb40" :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
            <div class="item-left sle">
              <span class="left-title">7日总任务单量</span>
              <div class="img-box">
                <img src="./images/book-sum.png" alt="" />
              </div>
              <span class="left-number">{{ taskAll }}</span>
            </div>
          </el-col>
          <el-col class="mb40" :xs="24" :sm="12" :md="12" :lg="4" :xl="8">
            <div class="item-center">
              <div class="today-traffic traffic-box">
                <div class="traffic-img">
                  <img src="./images/task_today.svg" alt="" />
                </div>
                <span class="item-value">{{ todayTask }}</span>
                <span class="traffic-name sle">今日任务单</span>
              </div>
              <div class="yesterday-traffic traffic-box">
                <div class="traffic-img">
                  <img src="./images/pay_today.svg" alt="" />
                </div>
                <span class="item-value">{{ todayTaskComplete }}</span>
                <span class="traffic-name sle">7日已完成</span>
              </div>
              <!-- <div class="gitee-traffic traffic-box">
                <div class="traffic-img">
                  <img src="./images/courier.svg" alt="" />
                </div>
                <span class="item-value">{{ courierCount }}</span>
                <span class="traffic-name sle">配送员总数</span>
              </div>
              <div class="gitHub-traffic traffic-box">
                <div class="traffic-img">
                  <img src="./images/pay_all.svg" alt="" />
                </div>
                <span class="item-value">78</span>
                <span class="traffic-name sle">总收款</span>
              </div> -->
            </div>
          </el-col>
          <el-col class="mb40" :xs="24" :sm="24" :md="24" :lg="14" :xl="10">
            <div class="item-right">
              <div class="echarts-title">7日内任务单</div>
              <div class="book-echarts">
                <Pie ref="pieRef" />
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col class="mb40" :xs="24" :sm="24" :md="24" :lg="12" :xl="10">
            <div class="item-right">
              <div class="echarts-title">7日内任务单数据</div>
              <div class="book-echarts">
                <Curve ref="curveRef" />
              </div>
            </div>
          </el-col>
          <el-col class="mb40" :xs="24" :sm="24" :md="24" :lg="12" :xl="10">
            <div class="item-right">
              <div class="echarts-title">7日配送员任务单磅</div>
              <div class="book-echarts">
                <CurveCourier ref="curveCourierRef" />
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="dataVisualize">
import { ref, onMounted } from "vue";
import Pie from "./components/pie.vue";
import Curve from "./components/curve.vue";
import CurveCourier from "./components/curveCourier.vue";
import { getTaskStatistics } from "@/api/modules/substation";
import { Substation } from "@/api/interface";
import { useUserStore } from "@/stores/modules/user";

const userStore = useUserStore();

const pieRef = ref();
const curveRef = ref();
const curveCourierRef = ref();
const taskList = ref<Substation.ResTaskOrderStatistics[]>();
const todayTask = ref();
const todayTaskComplete = ref(0);
const taskAll = ref();

interface TaskTypeCount {
  [key: number]: number;
}

interface TaskStatusCount {
  [key: number]: number;
}

interface TaskCourierCount {
  [key: string]: number;
}

interface TaskDayCount {
  [key: number]: number;
}

onMounted(async () => {
  taskList.value = await getTaskStatistics({ substationId: userStore.userInfo.departmentId });
  //总任务单数
  taskAll.value = taskList.value.length;
  todayTaskComplete.value = taskList.value.filter(task => task.taskStatus === 4).length;
  // 统计不同 taskType 的数量
  const taskTypeCount: TaskTypeCount = taskList.value.reduce((count: TaskTypeCount, task) => {
    const taskType = task.taskType;
    if (taskType) {
      count[taskType] = (count[taskType] || 0) + 1;
    }
    return count;
  }, {});
  // 统计不同 taskStatus 的数量
  const taskStatusCount: TaskStatusCount = taskList.value.reduce((count: TaskStatusCount, task) => {
    const taskStatus = task.taskStatus;
    if (taskStatus || taskStatus == 0) {
      count[taskStatus] = (count[taskStatus] || 0) + 1;
    }
    return count;
  }, {});

  // 统计配送员工作量
  const courierTaskCount: TaskCourierCount = taskList.value.reduce((count: TaskCourierCount, task) => {
    const courierName = task.courierInfo?.courierName;
    if (courierName) {
      count[courierName] = (count[courierName] || 0) + 1;
    }
    return count;
  }, {});

  const sortedCourierTaskCount = Object.entries(courierTaskCount)
    .sort(([, countA], [, countB]) => countB - countA) // 按任务数量从高到低排序
    .slice(0, 10) // 取前 7 个配送员
    .reduce(
      (obj: { names: string[]; values: number[] }, [name, count]) => {
        obj.names.push(name);
        obj.values.push(count);
        return obj;
      },
      { names: [], values: [] }
    );

  const pieData = ref({
    taskType: [taskTypeCount[1], taskTypeCount[2], taskTypeCount[3]],
    taskStatus: [taskStatusCount[0], taskStatusCount[1], taskStatusCount[2], taskStatusCount[3], taskStatusCount[4]]
  });
  const curveCourierData = ref(sortedCourierTaskCount);
  // 统计近7天内不同类型taskType的任务单数量
  const curveData = ref<{
    series1: number[];
    series2: number[];
    series3: number[];
    labels: string[];
  }>({
    series1: [],
    series2: [],
    series3: [],
    labels: []
  });

  // 统计近7天内不同类型任务单数量
  for (let i = 6; i >= 0; i--) {
    const day = new Date();
    day.setDate(day.getDate() - i);
    const year = day.getFullYear();
    const month = String(day.getMonth() + 1).padStart(2, "0");
    const date = String(day.getDate()).padStart(2, "0");
    const dateString = `${year}-${month}-${date}`;
    curveData.value.labels.push((dateString.slice(5, 10) as string) || "");
    const tasksByDay = taskList.value.filter(task => task.createTime?.toString() === dateString);
    if (i == 0) {
      // 计算今日任务单数
      todayTask.value = tasksByDay.length;
      // 计算今日任务单完成数
    }
    const taskTypeCountsByDay: TaskDayCount = tasksByDay.reduce((count: TaskDayCount, task) => {
      const taskType = task.taskType;
      if (taskType) {
        count[taskType] = (count[taskType] || 0) + 1;
      }
      return count;
    }, {});
    curveData.value.series1.push((taskTypeCountsByDay[1] as number) || 0);
    curveData.value.series2.push((taskTypeCountsByDay[2] as number) || 0);
    curveData.value.series3.push((taskTypeCountsByDay[3] as number) || 0);
  }

  pieRef.value.initChart(pieData);
  curveRef.value.initChart(curveData);
  curveCourierRef.value.initChart(curveCourierData);
});
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
